<template>
  <div>
    <!-- 检查项--区域 -->
    <el-checkbox-group
      v-model="regionId"
      @change="handleReport"
      class="mr-5 flex flex-wrap items-center"
    >
      <div
        class="itemELCheckbox"
        v-for="item in regionList"
        :key="item.regionId"
      >
        <el-checkbox
          :value="item.regionId"
          :disabled="regionId.includes(9) || regionId.includes(10)"
        />
        <div
          class="itemELCheckbox-title"
          :class="{
            active: regionId.includes(item.regionId),
          }"
          title="点击跳转"
          @click="scrollTo(item.regionId)"
        >
          {{ item.projectName }}
        </div>
      </div>
    </el-checkbox-group>
  </div>
</template>

<script setup>
import { ref, onMounted, watchEffect } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import { useUserStore } from "@/pinia";
import { storeToRefs } from "pinia";
import { watchStorage, setStorageWithEvent } from "@/utils/GlobalMonitoring.js";
import { cloneDeep } from "lodash";

onMounted(() => {});

const emit = defineEmits(["scrollTo"]);

// const userStore = useUserStore();
// const { checkDetailForm } = storeToRefs(userStore);

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {
      return {};
    },
  },
});

const regionId = ref([1, 2, 3, 4, 5, 6, 7, 8]);
const handleReport = () => {
  if (
    regionId.value &&
    (regionId.value.includes(9) || regionId.value.includes(10))
  ) {
    regionId.value = regionId.value.filter((item) => item === 9 || item === 10);
  }
};

// 锚点跳转
const scrollTo = (elementId) => {
  // emit("scrollTo", elementId);
  setStorageWithEvent("check_anchor_jump", { elementId: elementId });
};

defineExpose({
  scrollTo,
});

const regionList = ref([]);
watchEffect(() => {
  let data = cloneDeep(props.modelValue.projectList);
  regionList.value = data.sort((a, b) => {
    return a.regionId - b.regionId;
  });
});
</script>

<style scoped lang="scss">
.itemELCheckbox {
  @apply flex items-center mr-2;
}
.itemELCheckbox-title {
  @apply cursor-pointer mr-2 text-[0.7rem];
  color: #ccc;
}
.itemELCheckbox-title.active {
  color: #409eff;
}

:deep(.el-checkbox-group) {
  font-size: 0.8rem;
}
</style>